<template>
  <div class="index">
    <top-nav></top-nav>
    <div class="main">
      <center class="tabs">
        <div class="tips">
            <p style="margin-top: 10px; font-size: 16px; font-weight:700; line-height: 25px;">
            <font color="red">当前为游客试用页面，正式使用请点击左上角首页按钮</font>
            </p>
        </div>
        <el-radio-group v-model="activeIndex" @change="changeTab" style="margin-bottom: 30px;">
            <el-radio-button v-for="(item,index) in tab" :key="index" :label="index">{{item.name}}</el-radio-button>
        </el-radio-group>
        <div class="list-wrapper">
          <el-row>
              <el-button @click="btnClick(index)" :style="{width:item.width}" v-for="(item,index) in list" :key="index" type="primary" plain>{{(index+1)+'、'+item.name}}</el-button>
          </el-row>
        </div>
        <div class="tips">
            <p style="margin-top: 10px; font-size: 16px; font-weight:700; line-height: 25px;">
            <font color="red"> 购买后，还有VI真题以及性格问卷资料，并解锁更多题目</font>
            </p>
        </div>
      </center>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  name: "exam-index",
  data:()=>({
      activeIndex: 0,
      tabPosition: 'left',
      tab:[{name:'普华永道'},{name:'得勤'},{name:'毕马威'}],
      list:[],
      list0:[{name:'GBA游戏及应对概述',width:'100%'},{name:'门票游戏',width:'100%'},{name:'箭头游戏',width:'100%'},{name:'灯泡齿轮游戏',width:'100%'},{name:'箭头游戏',width:'100%'},{name:'图形推理',width:'100%'},{name:'开锁游戏',width:'100%'}],
      list1:[{name:'DTT网测介绍以及系统使用方法（首先阅读）',width:'100%'},{name:'图形变换',width:'50%'},{name:'分房间',width:'50%'},{name:'饼图',width:'50%'},{name:'拖线条',width:'50%'},{name:'个人时间表',width:'50%'},{name:'折线图',width:'50%'},{name:'日历表',width:'50%'},{name:'多人时间表',width:'50%'},{name:'图形推理',width:'50%'},{name:'拖拽排序',width:'50%'}],
      list2:[]
  }),
  methods:{
    async getUserInfo(){
			let {data:{code,data}}=await this.$http.post(this.$api.userInfo,{})
      if(code==200){
        this.setUserInfo(data)
        localStorage.setItem('userInfo',JSON.stringify(data))
      }
		},
    //切换选项卡
    changeTab(index){
        switch(index){
          case 0:
            this.list=this.list0
            break;
          case 1:
            this.list=this.list1
            break;
          case 2:
            this.list=this.list2
            break;
      }
    },
    btnClick(index){
      console.log(index)
      this.$router.push('/exam/list')
    },
    ...mapMutations(['setUserInfo'])
  },
  created(){
    this.list=this.list0
    this.getUserInfo()
  }
};
</script>

<style lang="scss" scoped>
.main{
    max-width:580px;
    margin-left: auto;
    margin-right: auto;
    .tabs{
        margin-top: 20px;
    }
    .tips{
        margin-bottom: 20px;
    }
    .list-wrapper{
        .el-button{
            margin-bottom: 30px;
        }
    }
}
</style>
